<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>提交订单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"/>
	    <meta http-equiv="Access-Control-Allow-Origin" content="*">
	    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<link rel="stylesheet" href="../css/place_order.css" />
		<link rel="stylesheet" href="../css/base.css" />
		<style>
			.payPwdBox {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				position: fixed;
				top: 0;
				display: none;
				z-index: 11;
			}

			.payPwd {
				width: 80%;
				height: 38%;
				position: fixed;
				left: 10%;
				top: 21%;
				background-color: #fff;
				border-radius: 10px;
				z-index: 123;
			}

			.payPwd p.title {
				width: 100%;
				height: .44rem;
				line-height: .44rem;
				text-align: center;
				border-bottom: 1px solid #e6e6e6;
				font-size: .16rem;
				color: #252525;
			}
			.payPwd .pay_type,.pay_num{
				width: 100%;
				height: .44rem;
				line-height: .44rem;
				text-align: center;

			}
			.pwdBox {
				width: 88%;
				height: .45rem;
				background-color: #ffffff;
				border-radius: 5px;
				margin: 0 auto;
				position: relative;
			}

			.pwdBox input[type=password] {
				caret-color: transparent;
				/*设置输入框光标颜色透明，达到隐藏光标的效果*/
				height: 100%;
				width: 16.6%;
				float: left;
				line-height: .44rem;
				text-align: center;
				font-size: .12rem;
				border: 1px solid #999999;
				border-left:none;
			}
			.pwdBox input[type=password]:first-child{
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				border-left: 1px solid #999999;
			}
			.pwdBox input[type=password]:last-child{
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
			}
			.payPwd .sure,
			.payPwd .cancel {
				display: inline-block;
				width: 50%;
				height: .44rem;
				line-height: .44rem;
				text-align: center;
				border-top: 1px solid #e6e6e6;
				font-size: .18rem;
				color: #252525;
				position: absolute;
				bottom: 0;
			}

			.payPwd .cancel {
				right: 0;
				border-left: 1px solid #e6e6e6;
			}


			.confirm {
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				position: fixed;
				top: 0;
				/*display: none;*/
				z-index: 11;
			}
			.confirm .box {
				width: 60%;
				height: 1rem;
				background-color: #ffffff;
				border-radius: 10px;
				margin: 0 auto;
				position: relative;
				top: 35%;
			}
			.confirm .box h4{
				width: 100%;
				height: .45rem;
				line-height: .55rem;
				background: #ffffff;
				text-align: center;
				border-radius: 10px;
				font-weight: normal;
			}
			.little_box .sure,
			.little_box .cancel {
				display: inline-block;
				width: 50%;
				height: .44rem;
				line-height: .44rem;
				text-align: center;
				border-top: 1px solid #e6e6e6;
				font-size: .14rem;
				color:#34B7EB ;
				position: absolute;
				bottom: 0;
			}

			.little_box .cancel {
				right: 0;
				border-left: 1px solid #e6e6e6;
			}
			.address-vif-ul{
				overflow: hidden;
			}
			.address-vif-ul li{
				overflow: hidden;
				height: .3rem;
				line-height: .3rem;
				width: 94%;
				margin: 0 auto;
				text-overflow: ellipsis;
				white-space: nowrap;
				/*border: 1px solid red;*/
				color: #000;
			}
			.address-vif-ul li span{
				display: block;
				float: left;
				color: #000;
				white-space: nowrap;
				overflow: hidden;
				width: 45%;
			}

		</style>
	</head>
	<body>
		<div id="app">
			<div class="header">
				<a href="shopcar/indexShop.html"><img src="../img/g_next.png" alt="" /></a>
				提交订单
			</div>
			<div class="placeOrder_address">
				<img class="add_address" src="../img/G_tixian_tj.png"/><span class="addressplace">{{span}}</span>
				<div class="addrss-vif" v-if="areyouok" style="overflow: hidden; z-index: 100000;">
					<ul class="address-vif-ul">
						<li>
							<span>{{addressList.username}}</span>
							<span style="float: right;">{{addressList.userPhone}}</span>
						</li>
						<li style="margin-bottom: 0.1rem;"> {{addressList.userAddressName}}</li>
					</ul>
				</div>
			</div>

			<div class="placeOrder_main" style="padding-bottom: 58px;">
				<div v-for="item in list">
					<div class="placeOrder_main_top">
						<img class="dianpu" src="../img/g_dianpu.png" alt="" />
						<span class="name">{{item.shopName}}</span>
						<img class="right" src="../img/icon-right.png" alt="" />
					</div>
					<div class="placeOrder_main_inner" v-for="item2 in item.goodsMapList">
						<img class="shangpin" :src="item2.goodsImg" alt="" />
						<div class="txt">
							<p class="name">{{item2.goodsName}}</p>
							<p class="price">
								<span class="num">X{{item2.cartNum}}</span>
								<span class="money">￥{{item2.shopPrice}}</span>
							</p>
						</div>
					</div>
				</div>
				<p class="peisong_FS">
					<span class="title">配送</span>
					<span class="res">商家配送</span>
				</p>
				<p class="beizhu">
					<span class="title">备注</span>
					<!--<textarea name="beizhu" id="beizhu" cols="30" rows="10"></textarea>-->
					<input type="text" name="beizhu" class="beizhuInp" placeholder="商品或配送补充说明" />
				</p>
				<p class="shangpin_money">
					<span class="title">商品总金额</span>
					<span class="num">￥{{sumMoney}}</span>
				</p>
				<p class="yunfei">
					<span class="title">运费</span>
					<span class="res">+￥0.00</span>
				</p>
				<p class="shangpin_money">
					<span class="title">支付方式</span>
					<span class="num">交易钱包</span>
				</p>
			</div>
			<div class="placeOrder_bottom">
				<span class="zong_price">￥{{sumMoney}}</span>
				<input class="TJ_btn" type="button" value="提交订单" name="" id="" @click="tjdd" />
			</div>
			<!-- <div class="overlay">
				<div class="tixian_password">
					<p class="title">输入支付密码</p>
					<img class="gb" src="../img/g_tixian_gb.png" alt="" />

					<div class="pwdBox">
							<input type="password" maxlength="1" autofocus>
							<input type="password" maxlength="1" autofocus>
							<input type="password" maxlength="1" autofocus>
							<input type="password" maxlength="1" autofocus>
							<input type="password" maxlength="1" autofocus>
							<input type="password" maxlength="1" autofocus>
						</div>
				</div>
			</div> -->
			<div class="payPwdBox">
				<div class="payPwd" style="height:3rem;">
					<!-- <p class="title"></p> -->
					<div class="pay_type"></div>
					<p class="pay_num"><!-- ￥<strong>20.00</strong> --></p>
					<div class="pwdBox">
						<input type="password" maxlength="1" autofocus>
						<input type="password" maxlength="1" autofocus>
						<input type="password" maxlength="1" autofocus>
						<input type="password" maxlength="1" autofocus>
						<input type="password" maxlength="1" autofocus>
						<input type="password" maxlength="1" autofocus>
					</div>
					<p class="sure">确认</p>
					<p class="cancel">取消</p>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/jquery-2.2.3.min.js"></script>
	<script src="../js/common.js"></script>
	<script src="../js/rem.js"></script>
	<script src="shopcar/js/vue.min.js"></script>
	<script src="../js/vue-resource.min.js"></script>
	<script>
		$(function(){
			/* $('.TJ_btn').click(function(){
				$('.overlay').show();

			}); */
			$('.tixian_password .gb').click(function(){
				$('.overlay').hide();
			})
		})


		new Vue({
			el: '#app',
			data: {
				list: [],
				sumMoney: '',
				span:'添加收货地址',
				areyouok:false,
				addressList:{},
				addressId:''
                //
			},
			mounted: function () {

                console.log(localStorage.getItem('addressId'));
                if(localStorage.getItem('addressId')){
                    this.$http.post(SURL+'/jfd/usersAddress/selectAddressByAddressId',{addressId:localStorage.getItem('addressId')},
						{emulateJSON: true}).then(res=>{
                        console.log(res.body.data)
						var resdata = res.body.data;
                        $('.placeOrder_address').attr('address',resdata.addressId)
                        this.span="修改收货地址"
                        var addressList = {
                            username:resdata.userName,
                            userPhone:resdata.userPhone,
                            userAddressName:resdata.userAddressName,
						}
						this.addressList = addressList;
                        this.areyouok = true;
					})
				}
                this.$nextTick(function () {
					var money = 0;
					var _this = this;
					this.$http.post(SURL + '/jfd/cart/gotoPay', {userId:localStorage.getItem('userId')}, {emulateJSON : true}).then(function(res) {
                        console.log(res)
					    var _data = res.body.data.data;
						this.list = _data;
						for (var i = 0; i < _data.length; i++) {
							var list1 = _data[i];
                            console.log(list1);
                            for (var ii = 0; ii < list1.goodsMapList.length; ii++) {
								var item2 = list1.goodsMapList[ii];
								var sum = item2.cartNum * item2.shopPrice;
								money = money + sum;
							}
						}
						this.sumMoney = money;
					})

					$('input[type=password]').on('keydown', function(e) {
					keycode = e.keyCode; //获取到哪个键 用来判断摁下的是不是删除键
					}).on('keyup', function() {
						var index = $(this).index();
						// 当摁下的删除键的时候，执行deletePwd方法
						if(keycode == 8) {
							deletePwd(index);
						} else {
							$('input[type=password]').blur().eq(++index).focus();
							// 通过正则判断是不是数字
							// 是数字则添加进用于存放密码的数组里
							// 如果不是，则把当前输入的清空并且获取焦点，使用户重新输入
							var patrn = /^[0-9]*$/;
							var value = $(this).val();
							if(patrn.test(value)) {
								pwd.push(value);
								$(this).val('·');
							} else {
								$('input[type=password]').eq(--index).val('');
								$('input[type=password]').eq(index).focus();
							}
						}
					});
					// 余额支付系列操作
					var pwd = []; //用于存放每一个input的值
					var pwdString; //最后的六位密码
					var inputNum = $('.pwdBox input');
					// 支付密码确认
					$('.sure').on('click', function() {
					    var aaaaa = /^[\u4e00-\u9fa5\w]{0,20}$/;
					    var testBeizhu = $('.beizhuInp').val();
                        if(!aaaaa.test(testBeizhu)){
                            alert('备注字数限制为20以内');
                        }else{
                            pwdString = ''
                            var that = this;
                            $('.payPwdBox').fadeOut();
                            pwdString = pwd.join(''); //将数组转化为字符串，用于存放最后的密码
                            for(var i = 0; i < inputNum.length; i++) {
                                inputNum.eq(i).val('');
                            }
                            var _josn = {
                                orderunique: sessionStorage.getItem('ddh'),
                                orderRemarks: '',
                                userId: localStorage.getItem('userId'),
                                paypassword: pwdString
                            }
                            _this.$http.post(SURL + '/jfd/shopOrders/payOrders', _josn, {emulateJSON : true}).then(function(res) {
                                console.log(res.body.msg);
                                if(res.body.code == 0){
                                    alert('支付成功')
                                    window.location.href = 'index/index.html'
                                }else {
                                    alert(res.body.msg)
                                    window.location.href = 'personal/myorder.html'
                                }
                                // window.location.href = 'index/index.html'
                            })
						}

					})
					//支付密码取消
					$('.cancel').on('click', function() {
						// 点击取消的时候清空所有input的值
						for(var i = 0; i < inputNum.length; i++) {
							inputNum.eq(i).val('');
						}
						$('.payPwdBox').fadeOut();
						// $('input[type=tel]').blur().eq(0).focus();  如果输入密码的弹出层不隐藏的话，输入密码的第一个input框要获取焦点
					});
					// 删除支付密码
					function deletePwd(index) {
						$('input[type=password]').eq(--index).val('').blur().eq(index).focus();
						$('input[type=password]').blur().eq(index).focus();
						pwd.pop();
					}
				})
			},
			methods: {
				tjdd: function () {
				    if(localStorage.getItem('addressId')){
                        var _paramStr = JSON.stringify(this.list);
                        console.log(_paramStr+'1111');
                        var addressId = $('.placeOrder_address').attr('address')
                        var _josn = {
                            userId: localStorage.getItem('userId'),
                            userAddressId: addressId,
                            paramStr: _paramStr,
							type: 3
                        }
                        this.$http.post(SURL + '/jfd/shopOrders/addOrders', _josn, {emulateJSON : true}).then(function(res) {
                            var _data = res.body.data;
                            if (res.body.code != 0) {
                                alert(res.body.msg);
                            }else {
                                sessionStorage.setItem('ddh', _data);
                                $('.payPwdBox').show();
							}
                        })
					}else {
				        alert('请添加收货地址')
					}
				}
			}
		})
	</script>
	<script>

/*模拟支付宝的密码输入形式*/
				(function(window, document) {
					var active = 0,
						inputBtn = document.getElementsByClassName('MM');
					for(var i = 0; i < inputBtn.length; i++) {
						inputBtn[i].addEventListener('click', function() {
							inputBtn[active].focus();
						}, false);
						inputBtn[i].addEventListener('focus', function() {
							this.addEventListener('keyup', listenKeyUp, false);
						}, false);
						inputBtn[i].addEventListener('blur', function() {
							this.removeEventListener('keyup', listenKeyUp, false);
						}, false);
					}

					/*监听键盘的敲击事件*/
					function listenKeyUp() {
						if(!isNaN(this.value) && this.value.length != 0) {
							if(active < 5) {
								active += 1;
							}
							inputBtn[active].focus();
						} else if(this.value.length == 0) {
							if(active > 0) {
								active -= 1;
							}
							inputBtn[active].focus();
						}
					}


				})(window, document);

				$('.placeOrder_address').click(function () {
                    // console.log(123);
					location.href = 'personal/address-yiwu.html'
					localStorage.setItem('inTo',1)
                })



	</script>
</html>
